<template>
  <van-row>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form ref="submitForm" @submit="doSubmit">
      <van-field
        readonly
        clickable
        name="outputDate"
        :value="submitForm.outputDate"
        label="日期选择"
        placeholder="点击选择日期"
        input-align="left"
        :rules="[{ required: true, message: '请选择日期' }]"
        @click="showOutputDatePicker = true"
      />
      <van-field
        name="shiftId"
        label="班次"
        input-align="left"
        :rules="[{ required: true, message: '请选择班次' }]"
      >
        <template #input>
          <van-radio-group v-model="submitForm.shiftId" direction="horizontal">
            <div v-for="(i,idx) in shiftList" :key="idx">
              <van-radio :name="i.id">{{ i.name }}</van-radio>
            </div>
          </van-radio-group>
        </template>
      </van-field>
      <van-list
        v-model="tableLoading"
        finished-text="没有更多了"
        :finished="true"
      >
        <van-cell>
          <template #default>
            <van-row>
              <!--            <van-col class="left" style="padding: 10px 16px" :span="8">编号</van-col>-->
              <van-col class="left" style="padding: 10px 16px" :span="6">编号</van-col>
              <van-col class="center" style="padding: 10px 16px" :span="12">产品名称</van-col>
              <van-col class="left" style="padding: 10px 16px" :span="6">产量</van-col>
            </van-row>
          </template>
        </van-cell>
        <van-cell v-for="(item,index) in submitForm.dataList" :key="index">
          <template #default>
            <van-row>
              <van-col :span="6">
                {{ item.produceNo }}
              </van-col>
              <van-col :span="12">
                {{ item.productName }}
              </van-col>
              <van-col :span="6">
                <van-field
                  v-model="item.quantity"
                  name="产量"
                  placeholder="请填写产量"
                  type="digit"
                  :rules="[{ required: true, message: '' }]"
                  input-align="left"
                />
              </van-col>
            </van-row>
          </template>
        </van-cell>
      </van-list>
      <van-button style="margin-bottom: 10px" icon="plus" plain block native-type="button" @click="showProduce = true">添加</van-button>
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-calendar v-model="showOutputDatePicker" :min-date="minDate" :show-confirm="false" @confirm="onConfirmOutputDate" />
    <div v-if="showProduce">
      <select-produce ref="selectProduce" multiple :disable-ids="submitForm.produceIds" :visible="showProduce" @close="handleCloseProduce" />
    </div>
  </van-row>
</template>

<script>
import { updateOutputById, selectOutputById, saveOutput, saveOutputBatch } from '@/api/output'
import { selectAllShift } from '@/api/shift'
import moment from 'moment/moment'
import Moment from 'moment'
import SelectProduce from '@/components/modules/selectProduce.vue'

export default {
  name: 'OutputSubmitModule',
  components: { SelectProduce },
  data() {
    return {
      tableLoading: false,
      showOutputDatePicker: false,
      showProduce: false,
      title: '',
      shiftList: [],
      productInfo: {},
      submitForm: {},
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    init() {
      this.resetForm()
      this.selectAllShift()
      this.title = '新增产量登记'
    },
    resetForm() {
      this.productInfo = {}
      this.submitForm = { id: '', produceIds: [], dataList: [] }
    },
    doSubmit() {
      if (!this.submitForm.dataList || this.submitForm.dataList.length === 0) {
        this.$toast.fail('请点击添加按钮选择排产单')
        return
      }
      saveOutputBatch(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.submitForm = {}
          this.$emit('close')
        }
      })
    },
    onConfirmOutputDate(row) {
      this.submitForm.outputDate = Moment(row).format('YYYY-MM-DD')
      this.showOutputDatePicker = false
    },
    selectAllShift() {
      selectAllShift().then(resp => {
        if (resp.success) {
          this.shiftList = resp.data
        }
      })
    },
    handleCloseProduce(dataList) {
      this.showProduce = false
      if (dataList && dataList.length > 0) {
        for (let i = 0; i < dataList.length; i++) {
          const row = dataList[i]
          if (this.submitForm.produceIds.length > 0 && this.submitForm.produceIds.indexOf(row.id) !== -1) {
            this.$toast.fail(`选择信息与第${this.submitForm.produceIds.indexOf(row.id) + 1}条重复`)
            continue
          }
          this.submitForm.dataList.push({ produceNo: row.produceNo, productName: row.productName })
          this.submitForm.produceIds.push(row.id)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
